<template>
  <div id="leftSider">
    <ul>
      <li><button :class="showPaneFor2D3D? 'leftsider_2D_3D leftsider_btn click' : 'leftsider_2D_3D leftsider_btn'" @click="showPaneForLayer = false; showPaneForsetting = false; showPaneForsearch = false; showPaneFor2D3D = !showPaneFor2D3D"></button></li>
      <li><button :class="showPaneForLayer? 'leftsider_layers leftsider_btn click' : 'leftsider_layers leftsider_btn'" @click="showPaneFor2D3D = false; showPaneForsetting = false; showPaneForsearch = false; showPaneForLayer = !showPaneForLayer"></button></li>
      <li><button :class="showPaneForsetting? 'leftsider_setting leftsider_btn click' : 'leftsider_setting leftsider_btn'" @click="showPaneFor2D3D = false; showPaneForLayer = false; showPaneForsearch = false; showPaneForsetting = !showPaneForsetting"></button></li>
      <li><button :class="showPaneForsearch? 'leftsider_search_btn leftsider_btn click' : 'leftsider_search_btn leftsider_btn'" @click="showPaneFor2D3D = false; showPaneForLayer = false; showPaneForsetting = false; showPaneForsearch = !showPaneForsearch"></button></li>
    </ul>
    <div class="leftsider_pane" v-show="showPaneFor2D3D">
      <my-settingPane v-on:closePane="closePane"></my-settingPane>
    </div>
    <div class="leftsider_pane" v-show="showPaneForsearch">
      <my-searchPane v-on:closePane="closePane"></my-searchPane>
    </div>
  </div>
</template>

<script>
  import settingPane from '@/components/siderBarItem/SettingPane'
  import searchPane from '@/components/siderBarItem/SearchChoicePane'
  export default {
    name: "leftRoom",
    data:function(){
      return {
        showPaneFor2D3D:false,
        showPaneForLayer:false,
        showPaneForsetting:false,
        showPaneForsearch:false
      }
    },
    components:{
      'my-settingPane':settingPane,
      'my-searchPane':searchPane
    },
    methods:{
      closePane:function(val){
        this.showPaneFor2D3D = val;
        this.showPaneForsearch = val;
      }
    }
  }
</script>

<style scoped>
  #leftSider {
    width: 40px;
    position:absolute;
    top:50%;
    left:10px;
    padding:10px 5px;
    z-index:1;
    background-color:rgba(28,28,29,.9);
    border-radius:2px;
  }
  #leftSider ul{
    margin: 0;
    padding: 0;
  }
  #leftSider ul li {
    list-style:none;
    padding:2px 0;
  }
  .leftsider_btn {
    width:40px;
    height:40px;
    border:none;
    outline:none;
    cursor:pointer;
  }
  .leftsider_2D_3D.click,
  .leftsider_layers.click,
  .leftsider_setting.click,
  .leftsider_search_btn.click,
  .leftsider_btn:hover {
    border:1px #818b8d solid;
    border-radius:2px;
    background-color:#3e5c68;
  }
  .leftsider_2D_3D {
    background:url(../../../static/IMG/leftsider/icon/二三维切换.png) center no-repeat;
  }
  .leftsider_layers {
    background:url(../../../static/IMG/leftsider/icon/图层.png) center no-repeat;
  }
  .leftsider_setting {
    background:url(../../../static/IMG/leftsider/icon/设置.png) center no-repeat;
  }
  .leftsider_search_btn {
    background:url(../../../static/IMG/leftsider/icon/查询.png) center no-repeat;
  }

  .leftsider_pane {
    position: absolute;
    top: 0;
    left: 60px;
    width:250px;
    background-color:rgba(28,28,29,.9);
    border-radius:2px;
    padding-bottom:20px;
  }
</style>
